{% extends 'base.html' %}
{% block title %}  - SEARCH by Category {% endblock %}

{% block onload %}
onload="document.getElementById('{{scroll}}').onclick();"
{% endblock %}

{% block content %}
<script type="text/javascript" src="/site_media/js/user.js"></script>
<script>
	var old_tools = new Array();
	var old_skills = new Array();
	var old_tags = new Array();
	
	var old_cats = new Array();
	var scrollTag='';

	{% if category.id %}
	var c = {{category.id}};
	{% else %}
	var c = 0;
	{% endif %}

	{% for x in old_categories %}
	old_cats.push({{x}});
	{% endfor %}
	{% for x in old_tools %}
	old_tools.push({{x}});
	{% endfor %}
	{% for x in old_skills %}
	old_skills.push({{x}});
	{% endfor %}
	{% for x in old_tags %}
	old_tags.push({{x}});
	{% endfor %}

	function show_array(_array, _old_array, _old_array_name, _html_id, prefix){
		var _html = ''; // tool
		for (var i=0;i<_array.length;i++){
			if (_array[2*i]){
				_html += "<input type='checkbox' value ='"+_array[2*i]+"' onmousedown=\"show_skt("
					+ _array[i*2]+",'" + _array[i*2+1] + "', "+_old_array_name+",'"+ prefix +"');\"";
				for (var j = 0;j<_old_array.length; j++){
					if (_old_array[j] == _array[i*2])
						_html += " checked='true' ";
				}
				_html += ">" + _array[i*2+1] + "<br/>";
			}
		}
		document.getElementById(_html_id).innerHTML = _html;
	}

	/*Show all the skills, tools and tags grouped by categories.*/
	function show_skill_tool_tag(c_id,tools, skills, tags){
		c = c_id;
		show_array(tools, old_tools, 'old_tools','_tools', 't');
		show_array(skills, old_skills, 'old_skills','_skills', 's');
		show_array(tags, old_tags, 'old_tags','_tags','');
	}

	/* Process with click on categories.*/
	function show_skt(_id, _name, _array, prefix){
		for(i=0;i<_array.length;i++){
			if (_id==_array[i]){
				_remove(_id,_array);
				jump_url();
				return ;
			}
		}

		scrollTag = prefix + _id;
		_array.push(_id);

		jump_url();
	}

	/* Process with unselect. */
	function _remove(_id, _array){
		for (i=0;i<_array.length;i++){
			if (_array[i]==_id){
				_array[i] = _array[_array.length - 1];
				_array.pop();
			}
		}
	}
	
	/* Process with select. */
	function push(_array, val){
		for (var i=0;i<_array.length;i++){
			if (_array[i]==val)
				return;
		}
		
		_array.push(val);
	}
	
	function select_cat(val){
		c = val;
		push(old_cats, val);
		jump_url();
	}
	
	function unselect_cat(val){
		c = val;
		_remove(val, old_cats);
		jump_url();
	}
	
	/* Jump to the new search URL. */
	function jump_url(){
		var _url = '';
		_url += '?c=' + c;
		_url += '&scroll=' + scrollTag;
		_url += get_array_url(old_tools, 't');
		_url += get_array_url(old_skills, 's');
		_url += get_array_url(old_tags, 'tag');
		_url += get_array_url(old_cats, 'cat');

		window.location.href = _url;
	}
	
	function get_array_url(_array, url_string){
		var temp = "";
		for (i=0;i<_array.length;i++){
			temp += '&' + url_string + i + '=' + _array[i];
		}
		
		return temp;
	}
	
	/* Unselect all the tools, skills, tags belong to a category. */
	function uncheck_all(c_id,tools, skills, tags){
		for (var i=0;i<skills.length/2;i++){
			_remove(skills[i*2], old_skills);
		}
		
		for (var i=0;i<tools.length/2;i++){
			_remove(tools[i*2], old_tools);
		}
		
		for (var i=0;i<tags.length/2;i++){
			_remove(tags[i*2], old_tags);
		}
		
		c = c_id;
	}
</script>
<div id="content" style="position:absolute; top:20px; left:0px; width:610px; height:relative; background-color: #1A1A1A; layer-background-color: #1A1A1A;">
<table width="610">

<tr>
	  <td colspan="5"><p><span style="font-size:14px;color:#CCC">Seach by categories and skills</span></p></td>
</tr>
</table>
</div>
<div id="content" style="position:absolute;top:57px;left:0px;">
	
	<div style="left:0px; top:0; WIDTH:304px; HEIGHT:290px; background-color: #1A1A1A; word-wrap:break-word; OVERFLOW:auto; overflow-x:hidden; top:40px; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
		<div style="position:relative;left:10px;top:10px;WIDTH:280px;">
        <table width="284">
        <tr><th>
        <b>Category</b><br />
        </th></tr>
        <tr><td>
			{% for x in skts %}
			<input type="checkbox" name="c_a_t_radio" value="{{x.category.id}}"
				   onmousedown="if(this.checked) {
					   uncheck_all({{x.category.id}},[{% for y in x.tools %}'{{y.id}}',' {{y.name}}',{% endfor %}],
					   [{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
					   [{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);
					   unselect_cat({{x.category.id}});
				   }else
					   select_cat({{x.category.id}});"
			{% if x.category.id in old_cats %} checked="true" />
				<a href="javascript:;" onclick="$(this).css('color','white').siblings().css('color','');
				show_skill_tool_tag({{x.category.id}},[{% for y in x.tools %}'{{y.id}}',' {{y.name}}',{% endfor %}],
				[{% for y in x.skills %}'{{y.id}}','{{y.name}}',{% endfor %}],
				[{% for y in x.tags %}'{{y.id}}','{{y.name}}',{% endfor %}]);">
				{{x.category.name}}</a>
			{% else %}
			{% if x.category.id in old_categories %} checked="true" />
				<a href="javascript:;" onclick="$(this).css('color','white').siblings().css('color','');
				show_skill_tool_tag({{x.category.id}},[{% for y in x.tools %}'{{y.id}}',' {{y.name}}',{% endfor %}],
				[{% for y in x.skills %}'{{y.id}}',' {{y.name}}',{% endfor %}],
				[{% for y in x.tags %}'{{y.id}}',' {{y.name}}',{% endfor %}]);">
					{{x.category.name}}
				</a>
			{% else %}
				 />
				<a href="javascript:;" onclick="$(this).css('color','white').siblings().css('color','');
				show_skill_tool_tag({{x.category.id}},[{% for y in x.tools %}'{{y.id}}',' {{y.name}}',{% endfor %}],
				[{% for y in x.skills %}'{{y.id}}',' {{y.name}}',{% endfor %}],
				[{% for y in x.tags %}'{{y.id}}',' {{y.name}}',{% endfor %}]);">
						{{x.category.name}}
				</a>
			{% endif %}
			{% endif %}
			<br/>
			{% endfor %}
            </td></tr>
            </table>
		</div>
	</div>
    
    <div style="position:absolute; left:305px; top:0px; WIDTH:305px; HEIGHT:290px; background-color: #1A1A1A; word-wrap:break-word; OVERFLOW:auto; overflow-x:hidden; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
	  <div style="position:relative;left:10px;top:10px;WIDTH:270px;">
			<table width="284">
        	<tr><th>
            <b>Skils</b> 
            </tr></th>
            <tr><td>
			<div id="_skills">
				{% for x in skts %}
				{% if x.category.id == category.id %}
				{% for y in x.skills %}
				<input type="checkbox" value="{{y.id}}" name="new_skills"
					   {% if y.id in old_skills %}
				checked ="true"
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_skills, 's');" />
                {{y.name}}
				<a id="s{{y.id}}" href="#s{{y.id}}" onclick="location.href='#s{{y.id}}'"></a><br/>
				{% else %}
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_skills, 's');">
                {{y.name}}
			  <a id="s{{y.id}}" href="#s{{y.id}}" onclick="location.href='#s{{y.id}}'"></a><br/>
				{% endif %}
				{% endfor %}
				{% endif %}
				{% endfor %}
			</div>
                </tr></td>
                </table>
	</div> <br/>

		<div style="position:relative;left:10px;top:10px;WIDTH:270px;">
			<table width="284">
        	<tr><th>
            <b>Tools</b>
            </tr></th>
            <tr><td>            
			<div id="_tools">
				{% for x in skts %}
				{% if x.category.id == category.id %}
				{% for y in x.tools %}
				<input type="checkbox" value="{{y.id}}" name="new_tools"
					   {% if y.id in old_tools %}
				checked ="true"
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_tools,'t');">
                {{y.name}}
				<a id="t{{y.id}}" href="#t{{y.id}}" onclick="location.href='#t{{y.id}}'"></a><br/>
				{% else %}
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_tools, 't');">
                {{y.name}}
			  <a id="t{{y.id}}" href="#t{{y.id}}" onclick="location.href='#t{{y.id}}'"></a><br/>
				{% endif %}					
				{% endfor %}
				{% endif %}
				{% endfor %}              
			</div>
                </tr></td>
                </table>  
		</div>
		<br/>

		<div style="position:relative;left:5px;top:5px;display:none">
			<table width="284">
        	<tr><th>
            <b>Tags</b> <br/><br/>
       		</tr></th>
            <tr><td>
            	<div id="_tags">
				{% for x in skts %}
				{% if x.category.id == category.id %}
				{% for y in x.tags %}
				<input type="checkbox" value="{{y.id}}" name="new_tags"
					   {% if y.id in old_tags %}
				checked ="true"
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_tags,'');">
                {{y.name}}<br/>
				{% else %}
				onmousedown="show_skt({{y.id}}, '{{y.name}}', old_tags,'');">
                {{y.name}}<br/>
				{% endif %}
				{% endfor %}
				{% endif %}
				{% endfor %}               
			</div>
                </tr></td>
                </table>             
		</div>
	</div>
<div style="position:absolute; left:0px; top:291px; WIDTH:610px; background-color: #1A1A1A;">
		<table width="610">
    		<tr><td colspan="2"><br><br />
		<p> Artist list | {% if artists.has_previous %} <a href="?page={{ artists.previous_page_number }}" title="Previous page"><<<</a> {% endif %}
			Page {{ artists.number }} of {{ artists.paginator.num_pages }}.
			{% if artists.has_next %}
			<a href="?page={{ artists.next_page_number }}" title="Next page">>>></a>
			{% endif %}
		</p></td></tr>
		</table>
		<table width="610">
			<tr>
			<th width="75"></th>
			<th width="75">Last name</th>
			<th width="75">First name</th>
			<th width="100">Job title</th>
			<th width="50">Unavailable</th>
			<th width="100">Note</th>
			</tr>
			{% for artist in artists.object_list %}
			<tr>
				<td>
					<a href="javascript:;artist_assets({{artist.id}});"><img src="{{artist.get_profile.photo}}" height="50"></a>
				</td>
				<td><a href="/user/{{artist.id}}/" title="View profile">{{artist.last_name}}</a></td>
				<td><a href="/user/{{artist.id}}/" title="View profile">{{artist.first_name}}</a></td>
				<td><a href="/user/{{artist.id}}/" title="View profile">{{artist.get_profile.role}}</a></td>
				<td>
					{% for temp in ues %}
					{% if temp.user.id == artist.id %}
          			{% if temp.star != temp.end %}
					{{temp.start}}<br/>{{temp.end}}
					{% endif %}
                    {% endif %}
					{% endfor %}
				</td>
				<td>
					<form action="/user/note/{{artist.id}}/?url=/user/search/cats/" method="post">
						<input name="note" maxlength="100" size="35" type="text" value="{{artist.get_profile.note}}"/>
					</form>
				</td>
			</tr>
			{% endfor %}
		</table>
  </div>
</div>
<div id="dialog"></div>
{% endblock %}